import styles from "@/assets/scss/list.module.scss";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useLocation, Link } from "react-router-dom";
import { Empty, Image, Pagination } from "antd";

function ListPages() {
    const location = useLocation();
    const [Data, setData] = useState([]);
    const [pages, setPages] = useState({
        page: 1,
        pageSize: 20,
        totalPage: 0,
        totalSize: 0
    });
    const [querys, setQuerys] = useState({
        type: [1,2,11,12,13,14],
        like: null
    });
    const loading = $.loading();
    const loadData = async (pageNumber = 1) => {
        loading.show();
        try {
            let response = await axios.post(`${$.baseUrl}/api/article/list`, {
                pages: {
                    page: pageNumber,
                    pageSize: 10
                },
                querys: {
                    "ARTICLE_STATUS": 1,
                    "ARTICLE_TYPE": querys.type,
                    "like": querys.like
                }
            });
            const Rows = response.data;
            if (Rows.success) {
                setData(Rows.data.list || []);
                setPages({
                    page: Rows.data.page,
                    pageSize: Rows.data.pageSize,
                    totalPage: Rows.data.totalPage,
                    totalSize: Rows.data.total
                });
            };
        } catch (error) {
            alert(error.message, null, "error");
        } finally {
            loading.hide();
        }
    };
    useEffect(() => {
        setQuerys({
            type: getSearchString("type") ? getSearchString("type").split(",").map(Number) : [1,2,11,12,13,14],
            like: getSearchString("keyWords")
        });
    },[location.search]);

    useEffect(() => {
        loadData();
    },[querys]);

    const itemRender = (_, type, originalElement) => {
        if (type === "prev") {
            return <a>上一页</a>
        };
        if (type === "next") {
            return <a>下一页</a>
        };
        return originalElement;
    };

    return (
        <div className={`${styles.main} m-t-20 p-b-48`}>
            {Data.length === 0 ? (
                <div className={`${styles.empty} rowCenterCenter`}>
                    <Empty />
                </div>
            ) : (
                Data.map((item, index) => {
                    return (
                        <Link to={`/details?ID=${item.ARTICLE_ID}${querys.type ? "&type=" + querys.type.join(",") : ''}`} className={`${styles.item} rowStartCenter`} key={index}>
                            <div className={styles["item-cover"]}>
                                <Image src={`${$.baseUrl}/public/imgs/other/${item.ARTICLE_COVER}`} preview={false} className={styles["item-image"]}></Image>
                            </div>
                            <div className={`${styles["item-content"]} flex-1 columnCenterStart`}>
                                <div className={`font-20 lineHeight-48 line-1 ${styles['item-title']}`}>{item.ARTICLE_TITLE}</div>
                                <div className={`font-16 lineHeight-32 line-2 ${styles['item-brochure']}`}>{item.ARTICLE_BROCHURE}</div>
                                <div className={`font-16 lineHeight-32 rowStartCenter ${styles['item-author']}`}>
                                    <div className="m-r-8">{item.ARTICLE_AUTHOR}</div>
                                    <div className="m-l-8">{item.CREATED_AT}</div>
                                </div>
                            </div>
                        </Link>
                    )
                })
            )}
            {Data.length > 0 ? (
                <div className={`rowCenterCenter m-t-48 ${styles.pages}`}>
                    <Pagination total={pages.totalSize} current={pages.page} itemRender={itemRender} showTotal={(total, range) => {
                        return (
                            <div className="m-r-16">共 {pages.totalPage} 页， {pages.totalSize} 条数据</div>
                        )
                    }} onChange={(page, pages) => { onPageChange(page) }} pageSize={pages.pageSize}></Pagination>
                </div>
            ) : (
                <div></div>
            )}
        </div>
    )
};

export default ListPages;